<template>
  <div>
    <!--  设备概览-->
    <el-card class="box-card c-l">
      <div slot="header" class="clearfix">
        <span>设备概览</span>
        <el-tooltip content="统计****" placement="bottom" effect="light">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
        >绑定设备
        </el-button
        >
      </div>
      <div class="device-gl">
        <img src="../../../assets/img/gateway.png"/>
        <div>
          <div class="de-text">{{ deviceObj.LoRaWAN.total }}</div>
          <div>LoRaWAN</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div>
          <div class="de-text">{{ deviceObj.LoRaPP.total }}</div>
          <div>LoRaPP</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div>
          <div class="de-text">{{ deviceObj.group }}</div>
          <div>&nbsp;</div>
          <div>群组</div>
        </div>
        <div class="line line-h"></div>
        <i class="iconfont icon-yalichuanganqi chuanganqi"></i>
        <div>
          <div class="de-text">{{ deviceObj.sensor.total }}</div>
          <div>&nbsp;</div>
          <div>传感器节点</div>
        </div>
      </div>
    </el-card>
    <!-- 监控 -->
    <el-card class="box-card c-r">
      <div slot="header" class="clearfix">
        <span>监控</span>
        <el-tooltip content="统计****" placement="bottom" effect="light">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
      </div>
      <div class="jiankong">
        <div>
          <span>网关离线</span>
          <span class="green">6</span>
        </div>
        <div>
          <span>节点离线</span>
          <span class="green">15</span>
        </div>
        <div>
          <span>传感器低电量</span>
          <span class="red">14</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
//2.调用后台接口
import {$deviceCount} from "@/api/index.js";

export default {
  name: "Device",
  data() {
    return {
      deviceObj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted() {
    this.getDevice();
  },
  methods: {
    getDevice() {
      $deviceCount().then((res) => {
        console.log(res);
        this.deviceObj = res.data.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.c-l {
  width: 60%;
  margin-right: 10px;
  flex: 1;

  .device-gl {
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .line {
      width: 2px;
      height: 60px;
      background: #e9eef6;
    }

    .line-h {
      width: 2px;
      height: 127px;
    }

    img {
      width: 50px;
    }

    .de-text {
      font-size: 35px;
      line-height: 45px;
    }

    .chuanganqi {
      font-size: 42px;
      color: #91a8bf;
      transform: rotate(180deg);
    }
  }
}

.c-r {
  width: 30%;

  .jiankong {
    div {
      span:nth-of-type(1) {
        font-size: 16px;
        font-weight: bold;
      }

      span:nth-of-type(2) {
        font-size: 12px;
        width: 46px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        border-radius: 21px;
      }

      height:40px;
      line-height:40px;
      display:flex;
      justify-content:space-between;
      align-items:center;

      .green {
        background: rgba(85, 179, 100, 0.2);
        color: #3f8c4b;
      }

      .red {
        background: rgba(236, 70, 78, 0.2);
        color: #ec464e;
      }
    }
  }
}

</style>